<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import dayjs from "dayjs";
// 声明 props 类型
export interface FormProps {
  formInline: {

  };
}
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({  })
});

const newFormInline = ref(props.formInline);
const handleClose = (tag: string) => {
  newFormInline.value.selectOrders.splice(newFormInline.value.selectOrders.indexOf(tag), 1)
}
const getSymbol = ()=>{
  if(newFormInline.value.currency_code=='GBP'){
    return '£';
  }else if(newFormInline.value.currency_code=='EUR'){
    return '€';
  }else if(newFormInline.value.currency_code=='CAD'){
    return 'CA$';
  }else if(newFormInline.value.currency_code=='AUD'){
    return 'AU$';
  }else if(newFormInline.value.currency_code=='NZD'){
    return 'NZ$';
  }else if(newFormInline.value.currency_code=='JPY'){
    return '円';
  }else if(newFormInline.value.currency_code=='KRW'){
    return '₩';
  }else{
    return '$';
  }
}
</script>
<template>
  <re-col>
    <main class="main-content" id="MainContent">
      <div class="container_wrapper account_orderDetail_default" id="account_orderDetail">
        <h1 class="title">Order Detail</h1>
        <div class="order-header">
          <div class="order-header-status">
            <span class="mo-tag" v-if="newFormInline.fulfillment_status==300">PENDING</span>
            <span class="mo-tag" v-if="newFormInline.fulfillment_status==320">SHIPPED</span>
            <span class="mo-tag" v-if="newFormInline.fulfillment_status==310">PARTIALLY SHIPPED</span>
          </div>
          <div class="order-header-ID">{{newFormInline.order_number||'-'}}</div>
          <div class="order-header-date format-date" data-date="1746584081" data-format="YYYY-mm-dd HH:MM:SS">{{newFormInline.created_at.slice(0,19)||'-'}}</div>
        </div>
        <div class="plugin-container-header"></div>
        <!-- order-table -->
        <div class="order-table">
          <div class="order-table-header  buy_again_warp">
            <span class="order-table-title">{{getSymbol()}} {{newFormInline.total_price||'-'}}</span>
            <div class="order-table-header-btns">
              <a class="mo-btn secondary_btn buy_again" data-order-id="33374107" href="javascript:;">Buy Again</a>
            </div>
          </div>
          <div class="order-table-body">
            <div class="order-table-body-info">
              <dl>
                <dt>Shipping Method</dt>
                <dd>{{newFormInline.shipping_zone_plan_name||'-'}}</dd>
              </dl>
              <dl>
                <dt>Payment Method</dt>
                <dd>{{newFormInline.transaction.payment_method||'-'}}</dd>
              </dl>
              <dl>
                <dt>Email</dt>
                <dd>{{newFormInline.customer_email||'-'}}</dd>
              </dl>
              <dl>
                <dt>Shipping Address</dt>
                <dd>{{newFormInline.customer_name}}</dd>
                <dd>{{newFormInline.shipping_address.address1}}</dd>
                <dd>{{newFormInline.shipping_address.address2}}</dd>
                <dd>{{newFormInline.shipping_address.city}},{{newFormInline.shipping_address.province}},{{newFormInline.shipping_address.zip}}</dd>
                <dd> {{newFormInline.shipping_address.country_name}}</dd>
                <dd>{{newFormInline.shipping_address.tel_area_code}}-{{newFormInline.shipping_address.phone||'-'}}</dd>
              </dl>
              <dl v-if="newFormInline.billing_address.phone">
                <dt>Billing Address</dt>
                <dd>{{newFormInline.customer_name}}</dd>
                <dd>{{newFormInline.billing_address.address1}}</dd>
                <dd>{{newFormInline.billing_address.address2}}</dd>
                <dd v-if="newFormInline.billing_address.city">{{newFormInline.billing_address.city}},{{newFormInline.billing_address.province}},{{newFormInline.billing_address.zip}}</dd>
                <dd> {{newFormInline.billing_address.country_name}}</dd>
                <dd v-if="newFormInline.billing_address.phone">{{newFormInline.billing_address.tel_area_code}}-{{newFormInline.billing_address.phone||'-'}}</dd>
              </dl>
            </div>
            <div class="plugin-orderdetail-product_top"></div>
            <div class="order-product-header mo-row">
              <div class="mo-col-6">Product</div>
              <div class="mo-col-2">Price</div>
              <div class="mo-col-2">Quantity</div>
              <div class="mo-col-2">Subtotal</div>
            </div>
            <div class="order-table-body-product">
              <div class="mo-row order-product-item" v-for="item in newFormInline.items">
                <div class="mo-col-6">
                  <div class="order-card-info">
                    <a class="order-card-info-picture" style="position:relative" >
                      <img :src="item.src" class="order-card-info-picture-image" :alt="item.variant_title">
                    </a>
                    <div class="order-card-info-detail">
                      <a class="order-card-info-title" style="font-weight:bold;">{{item.variant_title}}</a>
                      <div class="order-card-info-sku" v-html="item.sku_value"></div>
                    </div>
                  </div>
                </div>
                <div class="mo-col-2">
                  <span>{{getSymbol()}} {{item.price}}</span>
                </div>
                <div class="mo-col-2">
                  <span>{{item.quantity}}</span>
                </div>
                <div class="mo-col-2">
                  <span>{{getSymbol()}} {{item.price*item.quantity}}</span>
                </div>
              </div>
            </div>

            <div class="mo-table-footer">
              <div class="pay-cell">
                <span class="pay-cell-labe">Subtotal</span>
                <span class="pay-cell-value">{{getSymbol()}} {{newFormInline.current_subtotal_price}}</span>
              </div>
              <div class="pay-cell">
                <span class="pay-cell-labe">Promotion Discount</span>
                <span class="pay-cell-value">{{getSymbol()}} {{newFormInline.current_promotion_price}}</span>
              </div>
              <div class="pay-cell">
                <span class="pay-cell-labe">Shipping Cost</span>
                <span class="pay-cell-value">{{getSymbol()}} {{newFormInline.current_shipping_price}}</span>
              </div>
              <div class="pay-cell">
                <span class="pay-cell-labe">Freight insurance</span>
                <span class="pay-cell-value">{{getSymbol()}} {{newFormInline.current_insurance_price}}</span>
              </div>
              <div class="pay-cell" v-if="newFormInline.current_tip_price">
                <span class="pay-cell-labe">Tip</span>
                <span class="pay-cell-value">{{getSymbol()}} {{newFormInline.current_tip_price}}</span>
              </div>
              <div class="pay-cell pay-cell-total">
                <span class="pay-cell-labe">Total Price</span>
                <span class="pay-cell-value">{{getSymbol()}} {{newFormInline.total_price||'-'}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </re-col>

</template>
<style scoped>
:deep(.el-card) {
  border: none;
}
:deep(.el-card h5) {
  margin-bottom: 10px;
}
@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('@/assets/iconfont/FrankRuhlLibre-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 优化加载体验 */
}
body {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  width: 100%;
  color: #545454;
  line-height: 1.5;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  background-color: #fff;
  word-wrap: break-word;
}
#MainContent{height: 800px;overflow-y: auto; }
.title {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
  position: relative;
  color: #1D1F21;
  font-size: 32px;
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1px;
}
.order-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mo-tag {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  color: #ffffff;
  font-size: 12px;
  background: #ab6a00;
}
.order-header .order-header-ID {
  margin-top: 22px;
  color: #545454;
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
}
.order-header .order-header-date {
  margin-top: 10px;
  color: #888888;
  font-size: 14px;
  line-height: 18px;
}
.order-table {
  margin-top: 40px;
}
.order-table .order-table-header {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  background: #ddd;
}
.order-table .order-table-header .order-table-title {
  height: 24px;
  font-size: 20px;
  font-weight: 700;
  color: #545454;
  margin-right: auto;
}
.order-table .order-table-header .order-table-header-btns {
  display: flex;
  align-items: center;
}

.order-table .order-table-header .main_btn {
  margin-top: 0;
  height: 40px;
  line-height: 40px;
}

.order-table .order-table-body-info {
  padding: 30px 20px;
  display: flex;
  flex-wrap: wrap;
  background: #f6f6f6;
}

.order-table .order-table-body-info dl {
  width: 33%;
  margin-bottom: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

.order-table .order-table-body-info dt {
  min-height: 18px;
  font-size: 14px;
  color: #545454;
  margin-bottom: 12px;
  font-weight: bold;
}

.order-table .order-table-body-info dd {
  line-height: 22px;
  font-size: 14px;
  color: #373639;
}

.order-table .order-table-body-product {
  border-bottom: 1px solid #ddd;;
  background: #f6f6f6;
}

.account_orderDetail_default
.order-table
.order-table-body-product
.order-product-item {
  padding: 30px 22px;
  box-sizing: border-box;
  font-size: 14px;
}

.order-table
.order-table-body-product
.order-product-item
.order-card-info-price {
  color: #545454 !important;
}

.order-table
.order-table-body-product
.order-product-item
+ .order-product-item {
  border-top: 1px dashed #ddd;;
}

.order-table .mo-table-footer {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: #f6f6f6;
}

.order-table .mo-table-footer .pay-cell {
  display: flex;
  font-size: 14px;
}

.order-table .mo-table-footer .pay-cell .pay-cell-labe {
  color: #666666;
  text-align: right;
}

.order-table .mo-table-footer .pay-cell .pay-cell-value {
  color: #1d1f21;
  width: 120px;
  text-align: right;
}

.order-table .mo-table-footer .pay-cell + .pay-cell {
  margin-top: 10px;
}

.order-table .mo-table-footer .pay-cell-total {
  font-size: 16px;
  font-weight: bold;
}

.order-table .mo-table-footer .pay-cell-total .pay-cell-labe {
  color: #1d1f21;
}

.order-table .mo-table-footer .pay-cell-total .pay-cell-value {
  color: #ab6a00;
}

.secondary_btn {
  display: inline-block;
  font-size: 16px;
  margin-top: 0px;
  padding: 0 20px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #1d1f21;
  color: #1d1f21;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mo-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.mo-row .mo-col-6 {
  width: 50%;
  box-sizing: border-box;
}
.mo-row .mo-col-2 {
  width: 16.6666666667%;
  box-sizing: border-box;
}
.account_orderDetail_default .order-product-header {
  padding: 0 20px;
  height: 70px;
  display: flex;
  align-items: center;
  color: #666666;
  box-sizing: border-box;
  background: #f6f6f6;
  margin-top: 30px;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
}
.order-card-info .order-card-info-picture .order-card-info-picture-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
img {
  border: 0px;
  vertical-align: top;
}
.account_orderDetail_default .order-card-info-detail {
  padding: 0 20px;
  overflow: hidden;
}


.order-header .order-header-cancel {
  margin-top: 10px;
  color: #545454;
  font-size: 14px;
  line-height: 18px;
  text-decoration: underline;
  cursor: pointer;
}

.account_orderDetail_default .order-card-info-detail {
  padding: 0 20px;
  overflow: hidden;
}

.order-table {
  margin-top: 40px;
}


.order-table .order-table-header .order-table-header-btns {
  display: flex;
  align-items: center;
}
.order-table .order-table-header .order-table-header-btns a + a {
  margin-left: 10px;
}

.order-card-info {
  display: flex;
}

</style>
